<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>液体玻璃效果</title>
    <style>
        .liquidGlass-wrapper {
            position: relative;
            display: flex;
            font-weight: 600;
            overflow: hidden;
            color: black;
            cursor: pointer;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
        }

        .liquidGlass-effect {
            position: absolute;
            z-index: 0;
            inset: 0;
            backdrop-filter: blur(3px);
            filter: url(#glass-distortion);
            overflow: hidden;
            isolation: isolate;
        }

        .liquidGlass-tint {
            z-index: 1;
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.25);
        }

        .liquidGlass-shine {
            position: absolute;
            inset: 0;
            z-index: 2;
            overflow: hidden;
            box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
                inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
        }


        .dock {
            width: 200px;
            height: 100px;
        }

        /* OTHER STYLES */

        body {
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: url("https://raw.githubusercontent.com/lucasromerodb/liquid-glass-effect-macos/refs/heads/main/assets/flowers.jpg") center center;
            background-size: 400px;
            font-family: sans-serif;
            font-weight: 300;

            animation: moveBackground 60s linear infinite;
        }


        @keyframes moveBackground {
            from {
                background-position: 0% 0%;
            }

            to {
                background-position: 0% -1000%;
            }
        }
    </style>
</head>

<body>
    <svg style="display: none">
        <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
            <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17"
                result="turbulence" />
            <!-- Liked Seeds: 5, 14, 17 -->

            <feComponentTransfer in="turbulence" result="mapped">
                <feFuncR type="gamma" amplitude="100" exponent="10" offset="0.5" />
                <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
                <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
            </feComponentTransfer>

            <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

            <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100"
                lighting-color="white" result="specLight">
                <fePointLight x="-200" y="-200" z="300" />
            </feSpecularLighting>

            <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

            <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />
        </filter>
    </svg>

    <div class="liquidGlass-wrapper dock">
        <div class="liquidGlass-effect"></div>
        <div class="liquidGlass-tint"></div>
        <div class="liquidGlass-shine"></div>
    </div>
</body>

</html>